<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./js/leaflet/leaflet.css">
    <script type="text/javascript" src="./js/leaflet/leaflet.js"></script>
    <script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body
        {
            height: 100%;
        }
        #mapid
        {
            height: 75%;
        }
    </style>
</head>
<body>
<div id="mapid" style="float:left;width:100%;height: 100%;">

<script>
    //创建一个地图对象mymap，并设置初始化显示的中心点和地图放大级别
    //var mymap = L.map('mapid').setView([36.045, 103.83333], 14);

    //给地图对象mymap添加一个地图服务，并设置地图放缩的最大和最小级别（4-16）
    //在农信内网，把地址改成这样既可：
   /* L.tileLayer('http://198.198.198.193:6080/arcgis/rest/services/gansu/gansu/MapServer/tile/{z}/{y}/{x}', {
        maxZoom: 16,
        minZoom: 4,
        pane: 'overlayPane'
    }).addTo(mymap);*/


    //在地图上绘制一个圆点标记，并绑定鼠标点击事件，鼠标点击之后弹出气泡信息
    /*L.circleMarker([36.055, 103.83333], {
        stroke: true,
        color: '#aaaaaa',
        weight: 1,
        opacity:1,
        fillColor: '#00E400',
        fillOpacity: 1,
        radius:10
    }).addTo(mymap).bindPopup("<b>Hello world!</b><br />I am a popup.");*/


    //var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    var mymap = L.map('mapid').setView([36.045, 103.83333], 14);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

    L.circleMarker([36.055, 103.83333], {
        stroke: true,
        color: '#aaaaaa',
        weight: 1,
        opacity:1,
        fillColor: '#00E400',
        fillOpacity: 1,
        radius:10
    }).addTo(mymap).on("click",function(){
        var marker = this;
        $.ajax({
            type:"GET",
            dataType:"JSON",
            url:"http://localhost:8080/getOrgMessage",
            success:function(obj){
                alert(JSON.stringify(obj));
                var html = "<b>网点id:" + obj.per_id +"</b><br/><b>网点名称:"+ obj.per_name +"</b><br/><b>地址:"+ obj.per_address +"</b>";
                marker.bindPopup(html).openPopup().unbindPopup();
            },
            error:function(){
                alert("request fialure!!");
                marker.bindPopup("营业网点获取失败!").openPopup();
            }
        });

    });



            /*.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();*/



</script>
</body>
</html>